<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Keywords" content="凌空暗羽--个人图床；学习；探索；工具；应用">
    <meta name="discription" content="凌空暗羽--个人首页">
    <title>凌空暗羽个人网站</title>
    <link rel="shotcut icon" href="./icons/favicon.ico" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
    <script src="./jQuery/jquery-3.5.1.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <style>
        .nav-btn-list {
            margin-top: 10px;
        }
        
        .btn {
            background-color: #c09cfe;
            margin-left: 10px;
            border: 0px;
            font-size: 12px;
        }
        
        .btn:hover {
            background-color: #7b69d5;
        }
        
        .btn:focus,
        .btn:active:focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn.active.focus {
            outline: none;
            background-color: #7b69d5;
            color: #ffffff;
        }
        
        .item-title {
            color: pink;
            border: 1px red solid;
        }
        
        .tool-box {
            margin-top: 20px;
            border: 1px #c09cfe solid;
            border-radius: 4px;
        }
        
        .tool-sort {
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #e7e7ee;
        }
        
        .tool-list {
            width: 100%;
            display: flex;
            justify-content: left;
            text-align: center;
        }
        
        .tool-item {
            float: left;
            width: 50px;
            margin-left: 30px;
        }
        
        .tool-item :hover {
            cursor: pointer;
        }
        
        .tool-item-img {
            width: 100%;
            border-radius: 50%;
        }
        
        .tool-item-img img {
            width: 100%;
            border-radius: 50%;
        }
        
        .tool-item-desc {
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
        }
        
        .website-logo {
            width: 100%;
            margin-top: 20px;
        }
        
        .website-logo img {
            margin-right: 2px;
            width: 48%;
            height: auto;
        }
        
        .website-footer {
            position: absolute;
            bottom: 0px;
            margin-bottom: 10px;
        }
        
        .carousel-inner>div:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!--左部代码-->
    <div class="col-sm-9">
        <div class="col-sm-offset-2 nav-btn-list">
            <button type="button" class="btn btn-default iconfont icon-box" onclick="newLocation('./html/tool.html')">前端工具箱</button>
            <button type="button" class="btn btn-default iconfont icon-api" onclick="newLocation('./html/api.html')">API集锦</button>
            <button type="button" class="btn btn-default iconfont icon-interview" onclick="newLocation('./html/interview.html')">面试准备</button>
            <button type="button" class="btn btn-default iconfont icon-user" onclick="newLocation('./html/login.html')">用户登录</button>
            <button type="button" class="btn btn-default iconfont icon-clause" onclick="newLocation('./html/clause.html')">用户条款</button>
        </div>
        <div class="tool-box col-sm-12">
            <div class="tool-sort">前端工具箱</div>
            <div class="tool-list">
                <div class="tool-item">
                    <div class="tool-item-img"><img src="./images/tool-items/api-upload.png" /></div>
                    <div class="tool-item-desc">图片上传</div>
                </div>
            </div>
        </div>
        <div class="tool-box col-sm-12">
            <div class="tool-sort">API集锦</div>
            <div class="tool-list">
                <div class="tool-item">
                    <div class="tool-item-img"><img src="./images/tool-items/api-weather.png" /></div>
                    <div class="tool-item-desc">天气预报</div>
                </div>
                <div class="tool-item">
                    <div class="tool-item-img"><img src="./images/tool-items/api-map.png" /></div>
                    <div class="tool-item-desc">高德地图</div>
                </div>
                <div class="tool-item">
                    <div class="tool-item-img"><img src="./images/tool-items/api-words.png" /></div>
                    <div class="tool-item-desc">一言</div>
                </div>
                <div class="tool-item">
                    <div class="tool-item-img"><img src="./images/tool-items/api-music.png" /></div>
                    <div class="tool-item-desc">音乐排行</div>
                </div>
            </div>
        </div>
        <div class="tool-box col-sm-12">
            <div class="tool-sort">面试备战</div>
            <div class="tool-list">
                <div class="tool-item">
                    <div class="tool-item-img"><img src="./images/tool-items/api-psychology.png" /></div>
                    <div class="tool-item-desc">墨竹心理</div>
                </div>
                <div class="tool-item">
                    <div class="tool-item-img"><img src="./images/tool-items/api-clothes.png" /></div>
                    <div class="tool-item-desc">易搭衣橱</div>
                </div>
            </div>
        </div>

    </div>
    <!--右部代码-->
    <div class="col-sm-3">
        <div class="menu-title">网站简介</div>
        <div class="website-logo"><img src="./images/website/logo.jpg" align="left" />
            <p>&ensp;&ensp;&ensp;&ensp;凌空暗羽个人网站简介主要是为了为前端开发以及后台开发提供辅助服务，既希望本网站能够凸显出个人网站建设能力，应用到实际作品中；同时希望搭建本网站锻炼自己的网站开发能力，通过一些实际需求压力来提升自己对于thinkPHP后端框架以及bootstrap、jQuery前端框架的掌握程度。本网站将围绕api接口以及易搭衣橱作为重点开发方向，立志打造一款穿搭推荐软件，既能锻炼自己又能够起到实实在在的使用价值。</p>
        </div>
        <!--轮播广告-->
        <div id="myCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active" onclick="newLocation('https://www.aliyun.com/activity/618/2021?userCode=wxqoqe3s')">
                    <img src="./images/advertise/ad-images/ad-aliyun.jpg" title="阿里云服务器——学生时期不容错过的福利" alt="First slide">
                </div>
                <div class="item" onclick="newLocation('https://curl.qcloud.com/fQNqNWl2')">
                    <img src="./images/advertise/ad-images/ad-tencent.jpg" title="腾讯云服务器——一款实惠的云服务器" alt="Second slide">
                </div>
                <div class="item" onclick="newLocation('https://imlzz.top')">
                    <img src="./images/advertise/ad-images/lzz.jpg" title="imlzz.top——好兄弟的网站" alt="Third slide">
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!--footer部分-->
    <div class="col-sm-9 text-center website-footer">
        <div>2021-2022 <a href="https://nightowl.top">nightowl.top</a> 提供服务支持</div>
        <div><a href="https://beian.miit.gov.cn/#/Integrated/index">备案号：鄂ICP备2021000904号-1</a></div>
    </div>
    <script type="text/javascript" src="./javascript/index.js"></script>
</body>

</html>